<!DOCTYPE html>
<!-- <html lang="en"> -->
<html lang="zh-cn">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="img/32X32.ico" rel="shortcut icon" />
	<title>项目展示</title>
	<!-- load stylesheets -->
	<!-- <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:100,300,400">    -->
	<!-- Google web font "Open Sans" -->
	<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- Bootstrap style -->
	<link rel="stylesheet" href="css/templatemo-style.css">
	<!-- Templatemo style -->

	<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body id="top" class="page-2">

	<div class="tm-navbar-container tm-navbar-container-dark">

		<nav class="navbar navbar-full navbar-fixed-top bg-inverse">
			<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
			&#9776;
		</button>
			<div class="collapse navbar-toggleable-sm" id="tmNavbar">
				<ul class="nav navbar-nav">
					<li class="nav-item">
						<a href="index.html" class="nav-link external">首页</a>
					</li>
					<li class="nav-item">
						<a href="#top" class="nav-link">项目一</a>
					</li>
					<li class="nav-item">
						<a href="#tm-section-3" class="nav-link">项目二</a>
					</li>
					<li class="nav-item">
						<a href="#tm-section-4" class="nav-link">项目三</a>
					</li>
				</ul>
			</div>
		</nav>

	</div>

	<div class="container-fluid">

		<div class="row">
			<div id="tm-section-1" class="tm-section">
				<div class="col-md-12">
					<h1 class="text-xs-center blue-text tm-page-2-title">项目一</h1>
					<p class="text-xs-center tm-page-2-p tm-page-2-subtitle">
						项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一<br> 项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一项目一
					</p>
					<img src="img/tm-1800x600-01.jpg" class="img-fluid tm-banner-img" alt="Image">
				</div>
			</div>
		</div>

		<div class="row">
			<div class="tm-section" id="tm-section-2">
				<div class="col-md-12">
					<p class="text-left tm-description">
						项目一内容说明项目一内容说明项目一内容说明项目一内容说明项目一内容说明项目一内容说明
					</p>
					<p class="text-left tm-description">
						项目一内容说明项目一内容说明项目一内容说明项目一内容说明项目一内容说明项目一内容说明项目一内容说明
					</p>
					<div class="tm-flex-center">
						<a href="#" class="btn btn-default btn-lg tm-gray-btn">详细</a>
						<a href="#" class="btn btn-default btn-lg tm-gray-bordered-btn">了解</a>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="tm-section" id="tm-section-3">

				<div class="col-md-6 margin-bottom-sm-8">
					<div class="tm-2-col-box-left">
						<img src="img/tm-700x350-01.jpg" alt="Image" class="img-fluid tm-img-2-col">

						<p class="text-left tm-description">
							内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明
						</p>
						<p class="text-left tm-description">
							内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明
						</p>
					</div>
				</div>

				<div class="col-md-6">
					<div>
						<img src="img/tm-700x350-02.jpg" alt="Image" class="img-fluid tm-img-2-col">

						<table class="table table-striped">
							<tbody>
								<tr>
									<td>设计原型网站</td>
									<td>$100</td>
								</tr>
								<tr>
									<td>前端开发静态网站</td>
									<td>$200</td>
								</tr>
								<tr>
									<td>前端开发交互网站</td>
									<td>$300</td>
								</tr>
								<tr>
									<td>成品网站出售</td>
									<td>$400</td>
								</tr>
								<tr>
									<td>终身服务</td>
									<td>$500</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="tm-section" id="tm-section-4">
				<div class="col-md-4 margin-bottom-sm-3">
					<div class="tm-3-col-box">
						<img src="img/tm-500x250-01.jpg" alt="Image" class="img-fluid">

						<div class="tm-description-box">
							<p class="tm-description-text">
								文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈
							</p>

							<div class="tm-flex-center">
								<a href="#" class="btn btn-default tm-normal-btn tm-blue-btn">了解</a>
								<a href="#" class="btn btn-default tm-normal-btn tm-blue-bordered-btn">详细</a>
							</div>

						</div>
					</div>
				</div>

				<div class="col-md-4 margin-bottom-sm-3">

					<div class="tm-3-col-box">
						<img src="img/tm-500x250-02.jpg" alt="Image" class="img-fluid">

						<div class="tm-description-box">
							<p class="tm-description-text">
								文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈
							</p>

							<div class="tm-flex-center">
								<a href="#" class="btn btn-default tm-normal-btn tm-gray-btn">了解</a>
								<a href="#" class="btn btn-default tm-normal-btn tm-gray-bordered-btn">详细</a>
							</div>

						</div>
					</div>
				</div>

				<div class="col-md-4">
					<div class="tm-3-col-box">
						<img src="img/tm-500x250-03.jpg" alt="Image" class="img-fluid">

						<div class="tm-description-box">
							<p class="tm-description-text">
								文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈文字说明内容哈哈哈哈哈哈
							</p>

							<div class="tm-flex-center">
								<a href="#" class="btn btn-default tm-normal-btn tm-green-btn">了解</a>
								<a href="#" class="btn btn-default tm-normal-btn tm-green-bordered-btn">详细</a>
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="row">
			<div class="tm-section" id="tm-section-5">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
					<h3 class="blue-text">项目承包</h3>

					<table class="table table-striped tm-full-width-large-table">
						<thead>
							<tr>
								<th>序号</th>
								<th>描述</th>
								<th>种类</th>
								<th>Price</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>一元宝网站开发</td>
								<td>电商</td>
								<td>$1,000</td>
							</tr>
							<tr>
								<td>2</td>
								<td>驴友之家</td>
								<td>论坛</td>
								<td>$1,500</td>
							</tr>
							<tr>
								<td>3</td>
								<td>微支付</td>
								<td>微信</td>
								<td>$2,000</td>
							</tr>
							<tr>
								<td>4</td>
								<td>炫酷网</td>
								<td>H5响应布局</td>
								<td>$2,500</td>
							</tr>
							<tr>
								<td>5</td>
								<td>深鹏圳视频网</td>
								<td>视频直播</td>
								<td>$3,000</td>
							</tr>
							<tr>
								<td>6</td>
								<td>华盛顿政府网</td>
								<td>机关机构</td>
								<td>$3,500</td>
							</tr>
							<tr>
								<td>7</td>
								<td>鼎盛房产</td>
								<td>企业官网</td>
								<td>$4,000</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- tm-section -->
		</div>

		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
				<p class="text-xs-center tm-footer-text">Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://jieerwenking.top/">官网</a></p>
			</div>
		</div>
	</div>
	<!-- .container -->

	<script src="js/jquery-1.11.3.min.js"></script>
	<!-- jQuery (https://jquery.com/download/) -->
	<!-- <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> -->
	<script src="js/tether.min.js" charset="utf-8"></script>
	<!---------------在线修改本地js-------------------------->
	<!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
	<script src="js/jquery.singlePageNav.min.js"></script>
	<!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) -->

	<!-- Templatemo scripts -->
	<script>
		$(document).ready(function() {

			var mobileTopOffset = 54;
			var tabletTopOffset = 74;
			var desktopTopOffset = 79;
			var topOffset = desktopTopOffset;

			if ($(window).width() <= 767) {
				topOffset = mobileTopOffset;
			} else if ($(window).width() <= 991) {
				topOffset = tabletTopOffset;
			}

			/* Single page nav
			-----------------------------------------*/
			$('#tmNavbar').singlePageNav({
				'currentClass': "active",
				offset: topOffset,
				'filter': ':not(.external)'
			});

			if ($(window).width() < 570) {
				$('.tm-full-width-large-table').addClass('table-responsive');
			} else {
				$('.tm-full-width-large-table').removeClass('table-responsive');
			}


			/* Collapse menu after click
			-----------------------------------------*/
			$('#tmNavbar a').click(function() {
				$('#tmNavbar').collapse('hide');
			});


			/* Handle nav offset & table responsive upon window resize
			--------------------------------------------------------------*/
			$(window).resize(function() {

				if ($(window).width() < 768) {
					topOffset = mobileTopOffset;
				} else if ($(window).width() <= 991) {
					topOffset = tabletTopOffset;
				} else {
					topOffset = desktopTopOffset;
				}

				$('#tmNavbar').singlePageNav({
					'currentClass': "active",
					offset: topOffset,
					'filter': ':not(.external)'
				});

				if ($(window).width() < 570) {
					$('.tm-full-width-large-table').addClass('table-responsive');
				} else {
					$('.tm-full-width-large-table').removeClass('table-responsive');
				}
			});

		});
	</script>
</body>

</html>
